<template>
  <div>
    <el-table
      :data="lists"
      style="width: 100%;"
    >
      <el-table-column
        label="昵称"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="留言"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="留言时间"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ dayTime(scope.row.createdAt) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否显示" width="180" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isShow"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changerIsShow(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button type="danger" @click="del(scope.row._id,scope.$index)"> 删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="count"
      :page-size="pageSize"
      :current-page="currt"
      @current-change="change"
    />
  </div>
</template>

<script>
import { getMessage, upIsShow, delMessage } from '@/api/message'
import { Message } from 'element-ui'
import { apiMessage, apiUpMessage, apiDelMessage } from '@/routerConfig'
import { Time } from '@/utils/useDate'
export default {
  data() {
    return {
      lists: [],
      currt: 1,
      count: null,
      pageSize: 10,
      time: null
    }
  },
  async created() {
    await this.getMessages(this.currt)
  },
  methods: {
    async changerIsShow(row) {
      const { data } = await upIsShow(apiUpMessage, { _id: row._id, isShow: row.isShow })
      if (typeof data === 'string') {
        Message.error(data)
        // eslint-disable-next-line require-atomic-updates
        row.isShow = !row.isShow
      } else {
        Message.success('修改成功')
      }
    },
    async change(currt) {
      this.currt = currt
      await this.getMessages(currt)
    },
    async getMessages(currt) {
      const { data } = await getMessage(apiMessage, this.pageSize, currt)
      this.lists = []
      this.lists.push(...data.row)
      this.count = data.count
    },
    async del(_id, index) {
      const { data } = await delMessage(apiDelMessage, { _id })
      if (data) {
        Message.success('删除成功')
        if (this.count - 1 > 10) {
          if ((this.count - 1) % 10 === 0) this.currt--
          await this.getMessages(this.currt)
        } else {
          this.lists.splice(index, 1)
        }
      } else {
        Message.error('删除失败')
      }
    },
    dayTime(date) {
      return Time(date)
    }
  }

}
</script>

<style>

</style>
